<template>
  <a-spin :spinning="confirmLoading">

    <j-form-container >
      <a-form :form="form" slot="detail">

        <a-row>

          <a-row :style="styleObj">
            <!--  <a-card title="内容详情" v-if="wtxq" > -->
            <a-col :span="12">
              <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['titlesummary']" placeholder="请输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="isdistrue"
                  type="radio"
                  v-decorator="['proname']"
                  :trigger-change="true"
                  dictCode="proname"
                  placeholder=""
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="问题类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="isdistrue"
                  type="radio"
                  v-decorator="['questiontype']"
                  :trigger-change="true"
                  dictCode="task_type"
                  placeholder="请选择问题类型"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="需求类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="isdistrue"
                  type="radio"
                  v-decorator="['needtype']"
                  :trigger-change="true"
                  dictCode="task_xq_type"
                  placeholder="请选择需求类型"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="紧急程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="isdistrue"
                  type="radio"
                  v-decorator="['priority']"
                  :trigger-change="true"
                  dictCode="jjcd"
                  placeholder="请选择紧急程度"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="isdistrue"
                  type="checkbox"
                  v-decorator="['project']"
                  :trigger-change="true"
                  dictCode="module"
                  placeholder="请选择问题所属项目"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['influenceregion']" placeholder="请输入影响范围,多个地区请用逗号分割"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响行业" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="isdistrue"
                  type="list_multi"
                  v-decorator="['influenceindustry']"
                  :trigger-change="true"
                  dictCode="industry"
                  placeholder="请选择影响行业"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['fkuser']" placeholder="请输入反馈人"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="isdistrue"
                  type="list"
                  v-decorator="['fkusersf']"
                  :trigger-change="true"
                  dictCode="fkr_sf"
                  placeholder="请选择反馈人身份"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="截止时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="isdistrue"
                  placeholder="请选择截止时间"
                  v-decorator="['endtime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12" >
              <a-form-item label="需求负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['realname']" placeholder="暂未设置负责人" ></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload :disabled="isdistrue" v-decorator="['fileguid']" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="问题详细内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor :disabled="isdistrue" v-decorator="['questioncontent', { trigger: 'input' }]" />
              </a-form-item>
            </a-col>
            <!-- </a-card> -->
            <a-divider>方案</a-divider>

            <!--  <a-card title="方案出具详情" v-if="facjxq" > -->
            <a-col :span="12">
              <a-form-item label="方案名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['planname']"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :disabled="isdistrue" label="方案提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="isdistrue"
                  v-decorator="['fatctime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="方案提交人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isdistrue" v-decorator="['fzrusername']" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="方案附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload :disabled="isdistrue" v-decorator="['fileid']" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="方案详细内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor :disabled="isdistrue" v-decorator="['plan_describe', { trigger: 'input' }]" />
              </a-form-item>
            </a-col>
            <!-- </a-card> -->
            <a-divider>审批</a-divider>

            <!-- <a-card title="方案审批" v-if="faspjg" > -->
            <a-col :span="12">
              <a-form-item label="审批结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group :disabled="issp" v-decorator="['audit_shbj', {'initialValue': 1 }]" @change="thyjshow">
                  <a-radio value="1"> 通过</a-radio>
                  <a-radio value="2"> 退回</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col v-if="ishows" :span="12">
              <a-form-item label="退回意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea :disabled="issp" v-decorator="['audit_auditoption']"></a-textarea>
              </a-form-item>
            </a-col>
            <!--  </a-card> -->

          <!--          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>-->
          </a-row>

          <a-timeline v-if="iscklc" :style="pcphonefloatwidth">
            <a-timeline-item v-for="todo in todos">
              <a-icon slot="dot" :type="jdjpg" style="font-size: 16px"/>
              <a-divider type="vertical" />
              <div v-for="tod in todo">
                <div v-for="to in tod" >

                  <div>
                    {{ to.nodename }} -- <span style="color: #374cc2" v-if="to.isnew == 2">
                      <a-tag color="green">已审批</a-tag>
                    </span
                    ><span style="color: #374cc2" v-if="to.isnew == 0"><a-tag color="">未开始</a-tag></span>
                    <span style="color: #c2a943" v-if="to.isnew == 1"><a-tag color="blue">待审批</a-tag></span>
                  </div>

                  <p v-if="to.isnew == '2'">审核时间：{{ to.audittime }}</p>
                  <p>审核类型：{{ to.auditrange }}</p>
                  <!--  <p>审核子类型：{{ to.audittype }}</p> -->
                  <p>审核人员：{{ to.auditusername }}</p>
                  <span v-if="to.isnew == '2'">
                    <p v-if="to.shbj == 1">审核进度：
                      <a-tag color="#87d068">通过</a-tag>
                    </p>
                    <p v-if="to.shbj == 2">审核进度：
                      <a-tag color="#f50">退回</a-tag>
                    </p>
                    <p v-if="to.shbj == 2">退回原因：{{ to.auditoption }}</p>
                  </span>
                  <span v-if="to.isnew == '1'">
                    <p v-if="to.shbj == 0">审核进度：
                      <a-tag color="#ffd591">待审核</a-tag>
                    </p>
                  </span>
                  <a-divider/>
                </div>
              </div>

              <!-- <img src="../../../assets/jiantou.png" style="float: left;" /> -->

            </a-timeline-item>
          </a-timeline>

        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  name: 'TtQuestionClForm',
  components: {
    JFormContainer,
    JDate,
    JDictSelectTag,
    JMultiSelectTag
  },

  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      ishows: false,
      form: this.$form.createForm(this),
      model: {},
      faspjg: true,
      wtxq: true,
      facjxq: true,
      isdistrue: true,
      issp: false,

      // 流程图参数

      pcphonefloat: '',
      pcfloatwidth: {
       float: 'right',
       width: '18%'
      },
      phonefloatwidth: {
       float: 'top'
      },
      styleObj2: {
        width: '82%',
        float: 'left'
      },
      styleObj: {},
      styleObj1: {
        width: '100%'

      },

       todos: [],
       jdjpg: 'down-circle',
       draweris: false,
       iscklc: false,

      bdmodel: {},
      value: '1',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/tt_question_collect/ttQuestionDealRecord/add',
        edit: '/tt_question_collect/ttQuestionCollect/exid',
        queryById: '/tt_question_collect/ttQuestionCollect/queryById',
        fash: '/tt_question_collect/ttQuestionCollect/fangansh',
         flowcodelist: '/tt_question_collect/ttCollectFlowNode/list'
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {

       thyjshow(event) {
            console.log(event.target.value)

            if (event.target.value == 1) {
              this.ishows = false
            } else if (event.target.value == 2) {
              this.ishows = true
            }
          },

          // 判断手机端还是pc端
           IsPC() {
            var userAgentInfo = navigator.userAgent
            console.log('userAgentInfo', userAgentInfo)
            var Agents = ['Android', 'iPhone',
                  'SymbianOS', 'Windows Phone',
                  'iPad', 'iPod']
            var flag = true
            for (var v = 0; v < Agents.length; v++) {
              if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false
                break
              }
            }
            // false 为手机端打开，ture为pc端打开
            console.log('flag', flag)
            // return flag
            if (flag == false) {
              console.log('手机端打开')
               this.styleObj = this.styleObj1
               this.pcphonefloatwidth = this.phonefloatwidth
              // this.pcphonefloat = 'top'
            } else {
              console.log('pc端打开')
               this.styleObj = this.styleObj2
                this.pcphonefloatwidth = this.pcfloatwidth
              //  this.pcphonefloat = 'right'
            }
          },

          // 查看流程
             seeProcess(record) {
             //  if (record.auditstatus === '3') {
                 // 如果是退回的记录，则显示shbj为1的退回记录
              //   this.scbj = '1'
             //  } else {
                 this.scbj = '0'
            //   }
               let params = { id: record.id, scbj: this.scbj, lclx: 'falc' }
               getAction(this.url.flowcodelist, params).then((res) => {
                 if (res.success) {
                   let lis = res.result
                  this.col = parseInt(24 / (lis.length))
                  console.log(this.col)
                   this.todos = lis
                 }
               })

               // this.shjllczt(record.id)
               this.draweris = true
             },

    disabledDate(current) {
      return current && current <= moment().endOf('day') - 24 * 60 * 60 * 1000
    },
    add() {
      this.edit({})
    },
    bdsj(record, sfsp) {
      if (sfsp == '1') {
        record.audit_shbj = '1'
      }
        this.bdmodel = record
        this.edit(this.bdmodel)

        // 判断审批还是详情
        if (sfsp != '1') {
          this.issp = true
        } else {
          this.issp = false
        }
    },
    edit(record) {
      let params = { questioncode: record.id }
      getAction(this.url.queryByIdnode, params).then((res) => {
        if (res.success) {
          this.listmol = res.result
          console.log(this.listmol)
        }
      })

      this.IsPC()
      this.iscklc = true
      this.seeProcess(record)

      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'titlesummary',
            'proname',
            'project',
            'fkuser',
            'fkusersf',
            'questiontype',
            'needtype',
            'priority',
            'influenceregion',
            'influenceindustry',
            'questioncontent',
            'poroposername',
            'fileguid',
            'endtime',
            'collectorname',
            'auditstatus',
            'dealstatus',
            'planid',
            'planname',
            'plan_describe',
            'fileid',
            'fatctime',
            'fzrusername',
            'fzruserid',
            'audit_shbj',
            'audit_auditoption',
            'audit_id',
            'realname'

          )
        )
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },

    submitForm() {
      const that = this
      // 触发表单验证

      this.form.validateFields((err, values) => {
        console.log(values)
         that.confirmLoading = true
        debugger
        let spData = Object.assign(this.model, values)
        if (spData.audit_shbj == '2' && (spData.audit_auditoption == 'undefined' || spData.audit_auditoption == '' || spData.audit_auditoption == null || spData.audit_auditoption == 'null')) {
          that.$message.warning('请填写退回原因！')
          that.confirmLoading = false
          return
        } else if (spData.audit_shbj == '0' || spData.audit_shbj == undefined || spData.audit_shbj == 'null' || spData.audit_shbj == 'null') {
         that.$message.warning('请选择审批结果！')
         that.confirmLoading = false
         return
       } else if (spData.audit_shbj == '2' && spData.audit_auditoption.length > 199) {
            that.$message.warning('退回原因过长,请简要说明！')
            that.confirmLoading = false
            return
          }

        console.log('表单提交数据', spData)
        console.log('审批数据', spData.audit_id, spData.audit_shbj, spData.audit_auditoption)

       let httpisurl = this.url.fash
        var formData = new FormData()
        formData.append('id', spData.audit_id)
        formData.append('fashbj', spData.audit_shbj)
        formData.append('auditoption', spData.audit_auditoption)

        httpAction(httpisurl, formData, 'put')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })

          .finally(() => {
            that.confirmLoading = false
          })
      })
    },

    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'titlesummary',
          'proname',
          'project',
          'questiontype',
          'needtype',
          'priority',
          'fkuser',
          'fkusersf',
          'influenceregion',
          'influenceindustry',
          'questioncontent',
          'fileguid',
          'poroposername',
          'endtime',
          'collectorname',
          'auditstatus',
          'dealstatus',
          'planid',
          'planname',
          'plan_describe',
          'fileid',
          'fatctime',
          'fzrusername',
          'fzruserid',
          'audit_shbj',
          'audit_auditoption',
          'audit_id',
          'realname'

        )
      )
    }
  }
}
</script>
